<template>
  <div class="section07">
    <div class="section07-header">
      <h3 class="title">{{props.data.title}}</h3>
      <p class="description">{{props.data.description}}</p>
    </div>
    <div class="section07-body">
      <div class="section07-content" :class="{'empty': !item.title}"  v-for="(item, index) in convertSectionData(props.data.data, 4)" :key="index">
        <div class="section07-content2">
          <img class="section07-img" :src="item.icon" alt="">
          <h3 class="title">{{item.title}}</h3>
          <p class="description">{{item.description}}</p>
        </div>
        <div class="divide" v-if="index < 3"/>
      </div>

    </div>
  </div>
</template>

<script setup>
import {convertSectionData} from "@/utils/helper";

const props = defineProps(["data"])
</script>

<style scoped>




</style>
